<template>
  <view class="container">
    <view class="fill-base">
      <u-tabs
        :list="orderTabList"
        lineWidth="30"
        lineColor="#FD9336"
        @click="clickTab"
        :activeStyle="{
          color: '#FD9336',
          fontSize: '28rpx',
          fontWeight: 'bold',
        }"
        :scrollable="false"
        :inactiveStyle="{
          fontSize: '28rpx',
          color: '#777D94',
        }"
      >
      </u-tabs>
    </view>

    <view class="goods-scroll">
      <view
        class="coupon-item"
        v-for="(item, index) in couponList"
        :key="index"
      >
        <image
          class="coupon-bg"
          :src="$util.img('image/sanqi/coupon_bg.png')"
          v-if="item.state == 1"
        ></image>
        <image
          class="coupon-bg"
          :src="$util.img('image/sanqi/coupon_bg_use.png')"
          v-else
        ></image>
        <view class="coupon-content">
          <image
            class="coupon-use"
            :src="$util.img('image/sanqi/coupon_use.png')"
            v-if="item.state == 2"
          ></image>
          <image
            class="coupon-use"
            :src="$util.img('image/sanqi/coupon_va.png')"
            v-if="item.state == 3"
          ></image>
          <view class="coupon-left" v-if="item.type == 'reward'">
            <text class="coupon-amount">{{ parseInt(item.money) }}</text>
            <text class="coupon-unit">元</text>
          </view>
          <view class="coupon-left" v-else>
            <text class="coupon-amount">{{ parseFloat(item.discount) }}</text>
            <text class="coupon-unit">折</text>
          </view>
          <view class="coupon-right">
            <view class="coupon-header">
              <text class="coupon-name ellipsis">{{ item.coupon_name }}</text>
              <button
                class="get-btn"
                open-type="share"
                v-if="item.state == 1"
                :data-coupon-name="item.coupon_name"
                :data-coupon-id="item.coupon_id"
              >
                转赠
              </button>
            </view>
            <text class="coupon-condition">满{{ item.at_least }}元可用</text>
            <text class="coupon-time"
              >有效期至 {{ $util.timeStampTurnTime(item.end_time) }}</text
            >
          </view>
        </view>
      </view>
    </view>
    <emptyData
      :width="empty.width"
      :height="empty.height"
      :text="empty.text"
      :icon="empty.icon"
      :marginTop="empty.marginTop"
      v-if="couponList.length == 0"
    ></emptyData>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderTabIndex: 0,
      orderTabList: [
        {
          name: "待使用",
          type: 1,
        },
        {
          name: "已使用",
          type: 2,
        },
        {
          name: "已失效",
          type: 3,
        },
      ],
      couponList: [],
      page: 1,
      empty: {
        width: 135,
        height: 134,
        text: "暂无数据",
        icon: "/image/emptyAddress.png",
        marginTop: 100,
      },
    };
  },
  onLoad(data) {
    this.getList();
  },
  onReachBottom() {
    this.page++;
    this.getList();
  },
  methods: {
    clickTab(e) {
      this.orderTabIndex = e.index;
      this.page = 1;
      this.getList();
    },
    getList() {
      this.$api.sendRequest({
        url: "/coupon/api/coupon/memberpage",
        data: {
          page: this.page,
          page_size: 20,
          state: this.orderTabList[this.orderTabIndex].type,
        },
        success: (res) => {
          if (res.code == 0) {
            if (this.page == 1) this.couponList = [];
            this.couponList = [...this.couponList, ...res.data.list];
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
  },
  // 自定义分享内容
  onShareAppMessage(options) {
    console.log("分享", options);
    const couponName = options.target.dataset.couponName;
    const couponId = options.target.dataset.couponId;

    return {
      title: `${couponName || "优惠券"}转赠给你，快来领取吧！`,
      path: `/pages/index/index?coupon_id=${couponId}`,
      imageUrl: "", // 如果需要自定义分享图片，可以在这里添加
    };
  },
};
</script>

<style lang="scss" scoped>
.goods-scroll {
  margin: 24rpx;
}
.coupon-item {
  position: relative;
  width: 686rpx;
  height: 198rpx;
  margin-bottom: 30rpx;

  .coupon-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 686rpx;
    height: 198rpx;
  }

  .coupon-content {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    padding: 30rpx;
    box-sizing: border-box;
  }

  .coupon-use {
    position: absolute;
    top: 0;
    right: 0;
    width: 112rpx;
    height: 112rpx;
  }

  .coupon-left {
    width: 150rpx;
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding-top: 30rpx;
    font-weight: bold;

    .coupon-amount {
      font-size: 70rpx;
      color: #ffffff;
      line-height: 1;
      margin-right: 4rpx;
    }

    .coupon-unit {
      font-size: 26rpx;
      color: #ffffff;
    }
  }

  .coupon-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 40rpx;

    .coupon-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10rpx;

      .coupon-name {
        font-size: 28rpx;
        color: #151826;
        font-weight: 600;
      }

      .get-btn {
        background-color: $color-title2;
        color: white;
        padding: 0 20rpx !important;

        border-radius: 40rpx;
        font-size: 24rpx;
        margin: 0;
      }
    }

    .coupon-condition {
      font-size: 24rpx;
      color: $color-title2;
      margin-bottom: 10rpx;
    }

    .coupon-time {
      font-size: 22rpx;
      color: #788096;
    }
  }
}
</style>
